<template>
	<!-- 首页   -->

	<view class="index" ref="index">

		<view class="topTab"
			:style="{opacity : isTab ? 1 : 0,height : `${menuButtonInfo.top*2 + menuButtonInfo.height*2 + rise}rpx`}">
			<image :style="{height:`${menuButtonInfo.height-4}px`}" src="../../static/init.png" mode="heightFix">
			</image>
		</view>

		<view class="circle" v-if="isImg">
			<loading :toast="'Loading'" :title="''"></loading>
		</view>
		<view class="bannerBox">
			<view v-for="(item,index) in banner" class="bannerBox" :key="index" @click="goPage(item.page)">
				<view class="index_top_image"
					:style="{top:  `${menuButtonInfo.top+2}px`,height:`${menuButtonInfo.height}px`}">
					<image :style="{height:`${menuButtonInfo.height-4}px`}" src="../../static/init.png"
						mode="heightFix"></image>
				</view>
				<image :lazy-load="loadingImg" @load="imgLoad(index)" class="imgsItem" :src="item.image"
					mode="widthFix"></image>

				<!--close  0=展示 1=关闭 -->
				<view class="bannerText" v-if="item.close == 0">
					<view class="textTop">
						<view class="textTopx">{{item.bigTitle}}</view>
						<image class="textTopimg" mode="widthFix" :src="item.showIcon"></image>
					</view>
					<view class="textBottom">{{item.smallTitle}}</view>
				</view>
			</view>
			<view class="bottomLogo">
				<view class="bottomLogoText">Copyright©️ Chimian.cn 亚洲吃面公司出品</view>
				<image class="bottomLogoImg" src="https://z3.ax1x.com/2021/09/25/4sJtaQ.png" mode="widthFix"></image>
			</view>

		</view>


		<image class="xialai" v-if="isBottom" src="../../static/down.png"></image>
		<!-- <perfectbetabox pagepath="../my/setting/setting?login=1" :show="isShow" @ff_show="ff_shows"></perfectbetabox> -->
		<perfectbox :img="imgs" pagepath="../my/setting/setting?login=1" :inviteCode="inviteCodex" :show="isShow"
			@ff_show="ffShows">
		</perfectbox>
	</view>
</template>

<script>
	import perfectbox from "../../components/perfectbox/perfectbox.vue"
	import loading from '@/components/loading/loading.vue'
	export default {
		data() {
			return {
				selected: 0,
				// 0：出现邀请码的完善信息  1：出现普通的完善信息 2：隐藏
				isShow: 2,
				userPhoneApi: '',
				inviteCodex: '',
				imgs: '',
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				banner: [],
				isTab: false,
				menuButtonInfo: {
					top: 25
				},
				rise: 0,
				rises: 0,
				isBottom: true,
				bottomY: 0,
				loadingImg: "https://z3.ax1x.com/2021/09/25/4s9cSx.png",
				isImg: true
			}
		},
		onLoad(param) {
			
			this.init(param);
		},
		// 来自页面内分享
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: 'chimian',
				path: '/pages/index/index'
			}
		},
		onReachBottom() {
			this.isBottom = false;
			// debugger
		},
		onPageScroll(e) {
			// console.log("onPageScroll===>", e.scrollTop)
			if (e.scrollTop <= 450) {
				this.isTab = false;
			} else {
				this.isTab = true;
			}

			if (this.bottomY > e.scrollTop) {
				this.isBottom = true;
				// debugger
				return
			}
			this.bottomY = e.scrollTop - 20
		},
		onShow() {
			// this.initOnShow();
			this.isShow = Number(uni.getStorageSync('registerToast'));
			console.log('this.isShow--->',this.isShow)
			this.bannerlist();
		},
		components: {
			perfectbox,
			loading
			// perfectbetabox
		},
		computed: {
			isArise() {
				return this.$store.state.isArise;
			},
			Version() {
				return this.$store.state.Version;
			}
		},
		methods: {
			imgLoad(index) {

				if (index == 0) {
					this.isImg = false;
				}
			},
			async goPage(path) {
				// await this.initOnShow();
				this.isShow = Number(uni.getStorageSync('registerToast'));
				if (this.isShow == 2) {
					uni.navigateTo({
						url: path
					})
				}
			},
			bannerlist() {

				this.$apis.getBannerList().then(res => {
					if (res.code == 200) {
						this.banner = res.rows;
					}
				})


			},
			ffShows() {
				this.isShow = 2;
			},
			init() {
				// #ifndef H5 || APP-PLUS || MP-ALIPAY
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				console.log("this.menuButtonInfo====>", this.menuButtonInfo)
				// debugger

				uni.getSystemInfo({
					success: (res) => {
						// console.log(res.model);
						// console.log(res.pixelRatio);
						// console.log(res.windowWidth);
						console.log(res.windowHeight);
						if (res.windowHeight < 619) {
							this.rise = 35;
							this.rises = 0;
						} else if (res.windowHeight == 619) {
							this.rise = 20;
							this.rises = 15;
						} else if (res.windowHeight > 619 && res.windowHeight <= 730) {
							this.rise = 15;
							this.rises = 35;
						} else {
							this.rise = 0;
							this.rises = 0;
						}
						// console.log(res.language);
						// console.log(res.version);
						// console.log(res.platform);
					}
				});
				// #endif
			},
		}
	}
</script>

<style lang="scss">
	.index {
		width: 100vw;

		.topTab {
			opacity: 0;
			position: fixed;
			width: 100%;
			background-color: #f5f6f9;
			transition: all 1s;
			z-index: 999;

			image {
				position: absolute;
				bottom: 16rpx;
				left: 40rpx;
			}
		}

		.bannerBox {
			width: 100%;
			font-size: 0;
			position: relative;
		}

		.bannerBox:nth-child(2) {
			transform: translateY(-2rpx);
		}

		.bannerBox:nth-child(3) {
			transform: translateY(-6rpx);
		}

		.bannerBox:nth-child(4) {
			transform: translateY(-8rpx);
		}

		.circle {
			width: 100%;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			top: 0;
			left: 0;
			background-color: #fff;
			z-index: 999;

		}

		.bannerBox:nth-child(5) {
			transform: translateY(-10rpx);
		}

		.bannerBox:nth-child(6) {
			transform: translateY(-12rpx);
		}

		.bannerBox:nth-child(7) {
			transform: translateY(-14rpx);
		}

		.bannerBox:nth-child(8) {
			transform: translateY(-16rpx);
		}

		.bannerBox:nth-child(9) {
			transform: translateY(-18rpx);
		}

		.bannerBox:nth-child(10) {
			transform: translateY(-20rpx);
		}


		.index_top_image {
			position: absolute;
			width: 415rpx;
			z-index: 99;
			left: 40rpx;

		}

		.xialai {
			width: 60rpx;
			height: 60rpx;
			position: fixed;
			bottom: 20rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		.imgsItem {
			width: 100%;
			z-index: 99;
		}

		.bannerText {


			width: 670rpx;
			height: 150rpx;
			opacity: 1;
			background: rgba(245, 246, 249, 0.9);
			border-radius: 12rpx;
			box-shadow: 0px 1px 0px 0px #ededed inset;
			-webkit-backdrop-filter: blur(29px);
			backdrop-filter: blur(54rpx);
			position: absolute;
			left: 40rpx;
			bottom: 66rpx;
			padding: 25rpx 28rpx;
			box-sizing: border-box;
		}

		.textTop {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.textTopx {
			font-size: 42rpx;
			font-family: Montserrat, Montserrat-SemiBold;
			font-weight: SemiBold;
			color: #2d3034;
			text-align: left;
			color: #2d3034;
			flex: 1;

			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.textTopimg {
			width: 72rpx;
			// height: 35rpx;
			flex: 0 0 72rpx;
		}

		.textBottom {
			font-size: 26rpx;
			font-family: Source Han Sans SC, Source Han Sans SC-Regular;
			font-weight: 400;
			text-align: LEFT;
			color: #606266;

			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		>.bottomLogoText {
			font-size: 26rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Normal;
			font-weight: Normal;
			text-align: CENTER;
			color: #2d3034;
		}

		.bottomLogo {
			width: 100%;
			height: 186rpx;
			text-align: center;
			padding: 42rpx 0;
			box-sizing: border-box;
		}

		.bottomLogoImg {
			width: 182rpx;
			;
			margin-top: 20rpx;
		}

		.swiper {
			width: 100%;
			height: 100vh;
		}

		.index_top_image image {
			display: inline-block;

			// transform: translateY(5%);
		}

		.index_image {
			width: 750rpx;
			font-size: 0;
			z-index: 1000;
		}

		.index_image image {
			width: 100%;
		}
	}
</style>
